<template>
  <div class="page-style">
    <btn-area @search="searchFun" @download="downloadFun" />
    <tab-Area :table-data="list" />
    <pagination :total="total" @pagination="pagination" />
  </div>
</template>

<script>
import btnArea from './components/subordinate-outgoing/btn'
import tabArea from './components/subordinate-outgoing/table'
import pagination from '@/components/Pagination'
import { getAgentsOutgoingApi } from '@/api/agent'
export default {
  components: {
    btnArea,
    tabArea,
    pagination
  },
  data() {
    return {
      p: 1,
      num: 10,
      total: 0,
      order_num: '',
      list: [],
      anent_name: '',
      anent_phone: '',
      fanent_name: '',
      fanent_phone: ''
    }
  },
  created() {
    this.getAgentsoutgoingList()
  },
  methods: {
    getAgentsoutgoingList() {
      const data = {
        p: this.p,
        num: this.num,
        type: 3,
        anent_id: '',
        order_num: this.order_num,
        anent_name: this.anent_name,
        anent_phone: this.anent_phone,
        fanent_name: this.fanent_name,
        fanent_phone: this.fanent_phone

      }
      getAgentsOutgoingApi(data).then(res => {
        console.log(res)
        this.total = Number(res.count)
        this.list = res.list
      })
    },
    pagination(val) {
      this.p = val.page
      this.num = val.limit
      this.getAgentsoutgoingList()
    },
    searchFun(val) {
      this.order_num = val.order_num
      this.anent_name = val.anent_name
      this.anent_phone = val.anent_phone
      this.fanent_name = val.fanent_name
      this.fanent_phone = val.fanent_phone
      this.getAgentsoutgoingList()
    },
    downloadFun() {
      const data = []
      const theader = ['单号', '日期', '发货代理', '发货代理电话', '收货代理', '收货代理电话']
      this.list.forEach(item => {
        data.push([item.order_num, item.date, item.fanent_name, item.fanent_phone, item.anent_name, item.anent_phone])
      })
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          filename: '代理出货查看',
          data,
          header: theader,
          autoWidth: true
        })
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
